import React, {useEffect, useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import {FormControl, MenuItem, Select} from "@material-ui/core";
import InputLabel from "@material-ui/core/InputLabel";

const useStyles = makeStyles(theme => ({
    'form-control-menu': {
        marginBottom: theme.spacing(2),
        minWidth: 120,
        width: 'calc(100%)',
    },
    'form-control-option': {
        width: 250,
    },
    'select-empty': {
        marginTop: theme.spacing(2),
    },
}));

export const options = {
    1001: {
        "roomId": 1001,
        "title": "1对1",
        "width": 320,
        "height": 240,
        "bitrate": 150,
        "fps": 15,
    },
    1002: {
        "roomId": 1002,
        "title": "1对1",
        "width": 240,
        "height": 180,
        "bitrate": 250,
        "fps": 15,
    },
    1003: {
        "roomId": 1003,
        "title": "1对多",
        "width": 1280,
        "height": 720,
        "bitrate": 150,
        "fps": 15,
    },
    1004: {
        "roomId": 1004,
        "title": "1对多",
        "width": 320,
        "height": 240,
        "bitrate": 250,
        "fps": 15,
    },
    1005: {
        "roomId": 1005,
        "title": "1对多",
        "width": 240,
        "height": 180,
        "bitrate": 1200,
        "fps": 15,
    },

}

export default function Input({onChange, disabled}) {
    const classes = useStyles();
    const [inputLabel, setInputLabel] = useState('RoomID');

    const handleChange = (event) => {
        if (!onChange) {
            return;
        }
        onChange(options[event.target.value]);
    };
    let items = [];
    for (const i in options) {
        items.push(<MenuItem key={i}
                             value={i}>{options[i].title} {options[i].width}*{options[i].height} {options[i].bitrate}kbps {options[i].fps}fps</MenuItem>)
    }
    return (
        <div>
            {
                <FormControl className={classes['form-control-menu']}>
                    <InputLabel id={`room-input-label`}>{`选择房间`}</InputLabel>
                    <Select
                        id={inputLabel}
                        disabled={disabled}
                        label={inputLabel}
                        onChange={handleChange}
                    >
                        {
                            items
                        }
                    </Select></FormControl>
            }
        </div>
    );
}

Input.propTypes = {
    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    useStringRoomID: PropTypes.bool,
    onChange: PropTypes.func,
};
